[HTML] 테이블 만들기, table 태그를 사용해 레이아웃 구성하기

Table 태그는 테이블, 표를 만들 수 있는 가장 간단한 방법이다. 아래는 테이블 태그를 사용하여 표를 만드는 방법을 알아보고 table 코드를 사용했을때의 장점 및 단점 그리고 팁과 정보에 대하여 좀 더 자세하게 다뤄보려 한다.

# Table 태그를 사용하는 방법

먼저 테이블의 경우 표를 만드는데 사용하는 태그로 리스트 태그인 <ul> 태그와 구분할 수 있다. 이런 레이아웃을 구성하는 태그들은 그 쓰임과 목적에 따라 구분되어야 하는데 일반적으로 레이아웃 태그가 가진 기본적인 속성 때문에 이에 맞는 태그를 사용하는 것이 효과적이다. 예를들어 간단한 목록을 표현하는데는 리스트 태그인 <ul> 태그만으로 충분하여 <table> 태그를 사용하면 오히려 불필요한 속성들이 적용될 수도 있다.

아래는 테이블에 사용될 수 있는 태그들을 적어보았다. 해당 태그들은 각각 <table> 안에서 쓰임을 갖는다.

+ 태그의 쓰임 상세보기
<table> // 표를 생성하는 가장 상위의 태그
<thead> // 테이블 상단의 컬럼을 설명하는 제목들을 그룹화한 영역
<tbody> // 테이블의 메인 콘텐츠에 해당하는 영역
<tfoot> // 테이블 하단에 위치한 영역으로 풋터에 해당하는 부분을 그룹화한 영역

<tr> // 새로운 행이 시작되는 태그
<th> // 셀을 구분하기 위한 태그로 컬럼을 설명하는 thead 태그안의 위치하는 태그. td와 기능적으로 같으나 thead 태그안에 선언함
<td> // 각각의 셀을 구성하는 태그 요소로 tbody안에 위치함 

! 테이블 태그에 사용하는 속성

테이블 태그는 주로 다음의 속성들이 주로 사용된다. 아래의 태그를 우선 보자.

위 코드는 테이블 속성으로 width 그리고 border가 사용되었고 css를 사용하여 border-collapse, table-layout 이 선언되었다. 사실 이 네가지 태그 속성과 css 속성이 가장 많이 사용되는 속성으로 다른 것은 몰라도 이 부분은 확실히 알아둘 필요가 있다 하겠다.

i. width와 border 값
width와 border는 테두리를 결정한다. 테두리는 테이블뿐만 아니라 내부 td 태그등에만 사용되는 커스텀 요소가 많기 때문에 대부분 기본적으로 테이블 태그에 선언된 border를 제거한다.

ii. border-collapse
border-collapse는 인접한 테두리의 뷰를 결정하는데 사용가능한 값으로 collapse와 separate이 있다.

border-collapse: separate;
border-collapse: collapse;

값으로 separate을 선택할 경우 인접한 테두리들이 각각 모두 표현된다. 하지만 collapse는 인접한 테두리가 하나로 표현되기 때문에 대부분 이 속성을 기본값으로 선언해두고 사용한다.

iii. table-layout 속성
이 속성은 테이블 내부의 간격을 직접 설정하기 위해서 사용되는 속성으로 가장 많이 쓰이는 속성 중 하나이다. 간단히 설명하면... 테이블 태그는 기본적으로 내부 컬럼 사이의 간격을 가지게 되는데 이는 사용자가 따로 지정할 필요가 없이 간단하게 사용하는데 효과적이다. 하지만 테이블 태그의 내부 컬럼 간격을 원하는데로 조정할 경우 반드시 이 속성값이 fixed로 사용하여야 외부 css를 사용한 간격조정이 가능하다 하겠다.


! td 태그 사용하여 테이블의 컬럼, 로우를 합치기 아래는 td태그를 서로 병합하여 합치는 방법이다.

colspan='상하로 합치고자 하는 셀의 개수'
rowspan='좌우로 합치고자 하는 셀의 개수'

# table 태그 예제

table 태그를 사용하는 간단한 예제를 만들어본다.

# colspan 또는 rowspan을 적용하지 않은 경우
아래는 위 코드를 출력한 결과이다.

Title1	Title2
Test11	Test12
Test21	Test22

! 또 다른 예제보기 2
# colspan을 사용하여 컬럼을 합친 경우

Title1	Title2
Test11
Test21	Test22

! 또 다른 예제보기 3

# rowspan을 사용하여 로우(row)를 합친 경우

Title1	Title2
Test11	Test12
Test21

! 테이블의 테두리(border) 색상을 변경할 경우

테이블 태그를 CSS를 사용하여 색상을 변경할 경우 border-color 속성만 지정해서는 테두리색이 변경이 안된다. 이때는 아래와 같이 border 속성을 사용하여야 한다.

이처럼 border 속성을 사용하여야 정상적으로 스타일이 적용됨을 참고하자.